<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-image: url(./img/背景.png);
    }

    * {
        margin: 0;
        padding: 0;
    }

    .mid li {
        display: inline-block;
        padding: 0 20px;
        margin: 0 auto;
    }

    a {
        color: rgb(4, 238, 227);
        text-decoration: none
    }

    .mid img {
        vertical-align: middle
    }

    .mid {
        position: absolute;
        top: 2%;
        left: 12%;
        overflow: hidden;
        height: 27px;
    }

    .head {
        background-image: url(./img/头部.png);
        overflow: hidden;
        height: 72px;
    }

    .denglu {
        position: absolute;
        top: 2%;
        left: 87%;
        border: 0px;
    }

    .dl {
        border: none;
        background-color: rgb(20, 42, 70);
    }

    .dl:hover {
        cursor: pointer;
    }

    .dl div {
        background-color: rgba(255, 255, 255, 0.432);
        position: absolute;
        top: 7%;
        left: 6%;
        width: 85%;
        height: 70%;
        opacity: 0;
    }

    .gg:hover {
        opacity: 1;
    }

    .bb {
        width: 100%;
        height: 20%;
        background-image: url(./img/背景.png);
    }

    .bleft {
        background-image: url(./img/欧皇2.png);
        width: 32px;
        height: 120px;
    }

    .bleft p {
        font-size: 22px;
        margin: 0px 4px;
        color: rgb(4, 238, 227);
    }

    .pan {
        position: absolute;
        top: 8%;
        left: 2%;
        height: 112px;
        overflow: hidden;

    }

    .ju {
        margin: 0 2px;
        float: left;
        height: 112px;
        width: 129px;
        background-image: url(./img/龙狙.png);
        display: block;
        transition: all 1.5s;

    }

    .xingyun {
        background-image: url(./img/幸运VIP.png);
        width: 100%;
        height: 35vh;

    }

    .ju:hover {
        transform: rotateY(720deg);
        transition: all 1.5s;
    }

    .shangcheng,
    .zhuangbei,
    .hezi,
    .chai,
    .roll {
        width: 253px;
        height: 270px;
        background-image: url(./img/菱形.png);
    }

    .tou {
        margin-left: 10%;
        overflow: hidden;
        height: 312px;
    }

    .roll,
    .chai,
    .hezi,
    .zhuangbei,
    .shangcheng {
        float: left;
        margin: 50px 30px;
    }

    .roll1 {
        margin-top: 23%;
        margin-left: 29%;
        width: 110px;
        height: 110px;
        background-image: url(./img/roll福利大礼盒.png);
    }

    .chai1 {
        margin-top: 23%;
        margin-left: 29%;
        width: 110px;
        height: 110px;
        background-image: url(./img/拆箱王大礼盒.png);
    }

    .hezi1 {
        margin-top: 23%;
        margin-left: 29%;
        width: 110px;
        height: 110px;
        background-image: url(./img/盒子大战大图标.png);
    }

    .zhuangbei1 {
        margin-top: 23%;
        margin-left: 29%;
        width: 110px;
        height: 110px;
        background-image: url(./img/装备升级大图标.png);
    }

    .shangcheng1 {

        width: 255px;
        height: 270px;
        background-image: url(./img/商城.png);
    }

    .shangcheng1 p {
        position: relative;
        top: 13%;
        left: 34%;
        margin: 0 auto;
        font-weight: bolder;
        color: rgb(177, 249, 249);
        font-size: 20px;
    }

    .roll:hover {
        cursor: pointer;
        background-image: url(./img/菱形高光.png);
    }

    .chai:hover {
        cursor: pointer;
        background-image: url(./img/菱形高光.png);
    }

    .hezi:hover {
        cursor: pointer;
        background-image: url(./img/菱形高光.png);
    }

    .zhuangbei:hover {
        cursor: pointer;
        background-image: url(./img/菱形高光.png);
    }

    .roll1 img {
        margin-top: 135%;
        margin-left: -22%;
    }

    .chai1 img {
        margin-top: 135%;
        margin-left: -22%;
    }

    .hezi1 img {
        margin-top: 135%;
        margin-left: -22%;
    }

    .zhuangbei1 img {
        margin-top: 135%;
        margin-left: -22%;
    }

    .shangcheng1 img {
        position: relative;
        top: 77%;
        left: 19%;
    }

    .right {
        position: fixed;
        right: 0%;
        top: 30%;
        width: 74px;
        height: 354px;
    }

    .r1,
    .r2,
    .r3,
    .r4 {
        width: 74px;
        height: 85px;
        margin-top: 30px;
        background-image: url(./img/右边红框.png);
    }

    .k1 {
        position: relative;
        top: 26%;
        left: 31%;
        width: 29px;
        height: 39px;
        background-image: url(./img/客服手机.png);
    }

    .k2 {
        position: relative;
        top: 30%;
        left: 30%;
        width: 33px;
        height: 33px;
        background-image: url(./img/客服群.png);
    }

    .k3 {
        position: relative;
        top: 28%;
        left: 26%;
        width: 37px;
        height: 35px;
        background-image: url(./img/客服.png);
    }

    .z1 {
        color: white;
        position: relative;
        top: 50%;
        left: 7%;
    }

    .z2 {
        color: white;
        position: relative;
        top: 50%;
        left: 15%;
    }

    .z3 {
        color: white;
        position: relative;
        top: 50%;
        left: 7%;
    }

    .k4 {
        position: relative;
        top: 30%;
        left: 30%;
    }

    .mengxin {
        background-image: url(./img/大背景.png);
        height: 884px;
        width: 100%;

    }

    .mengxin1 {
        width: 390px;
        position: relative;
        top: 8%;
        left: 41%;
        height: 66px;

    }

    .diyipai {
        height: 400px;
        overflow: hidden;
    }

    .ak {
        float: left;
        margin-top: 6%;
        margin-left: 19px;
        position: relative;
        left: 11%;
        width: 298px;
        height: 317px;
    }

    .akt {
        position: absolute;
        left: 28%;
        top: 20%;
    }

    .ak:hover {
        cursor: pointer;
        background-image: url(./img/背景紫色.png);
        background-size: 100% 90%;
    }

    .ak:hover .akt {
        animation: akt 2s linear infinite;
    }

    .ak p {
        color: rgb(181, 177, 216);
        width: 64px;
        position: relative;
        top: 7%;
        left: 34%;
    }

    .vb {
        position: absolute;
        left: 32%;
        top: 65%;
    }

    .ak span {
        position: absolute;
        left: 43%;
        top: 65%;
        font-size: 20px;
        font-weight: bolder;
        color: orange;
    }

    .dierpai {
        height: 400px;
        overflow: hidden;
    }

    .hudie {
        float: left;
        margin-top: 6%;
        margin-left: 19px;
        position: relative;
        left: 11%;
        width: 298px;
        height: 317px;
    }

    .hudie span {
        position: absolute;
        left: 43%;
        top: 65%;
        font-size: 20px;
        font-weight: bolder;
        color: orange;
    }

    .hudie p {
        color: rgb(181, 177, 216);
        width: 64px;
        position: relative;
        top: 7%;
        left: 34%;
    }

    .hudie:hover {
        cursor: pointer;
        background-image: url(./img/背景紫色.png);
        background-size: 100% 90%;
    }

    .hudie:hover .akt {
        animation: akt 2s linear infinite;
    }

    .leifb {
        position: absolute;
        left: 0;
        top: 60%;
        width: 365px;
        height: 220px;
        background-image: url(./img/左右.png);
    }

.rightb{
    position: absolute;
        right:0;
        top: 60%;
        width: 365px;
        height: 220px;
        background-image: url(./img/左右2.png);
}

    @keyframes akt {
        0% {
            transform: translateY(0);
        }

        25% {
            transform: translateY(-7px);
        }

        50% {
            transform: translateY(0);
        }

        75% {
            transform: translateY(7px);
        }

        100% {
            transform: translateY(0);
        }

    }
</style>

<body>
    <div class="head">
        <div class="left">
            <img src="./img/vip.png" alt="">
        </div>
        <div class="mid">
            <ul>
                <li><img src="./img/首页.png" alt=""><a href="#">首页</a></li>
                <li><img src="./img/roll福利.png" alt=""><a href="#">roll福利</a></li>
                <li><img src="./img/拆箱王.png" alt=""><a href="#">拆箱王</a></li>
                <li><img src="./img/盒子大战.png" alt=""><a href="#">盒子大战</a></li>
                <li><img src="./img/装备升级.png" alt=""><a href="#">装备升级</a></li>
                <li><img src="./img/欧皇榜.png" alt=""><a href="#">欧皇榜</a></li>
            </ul>
        </div>
        <div class="denglu">
            <button class="dl">
                <img src="./img/登录.png" alt="">
                <div class="gg"></div>
            </button>

        </div>
    </div>
    <div class="bb">
        <div class="bleft">
            <p>实时欧皇</p>
        </div>
        <div class="pan">
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
            <div class="ju"></div>
        </div>
    </div>
    <div class="xingyun"></div>
    <div class="xiangzi">
        <div class="tou">
            <div class="roll">
                <div class="roll1">
                    <div><img src="./img/roll福利大.png" alt=""></div>
                </div>
            </div>
            <div class="chai">
                <div class="chai1"><img src="./img/拆箱王大字.png" alt=""></div>
            </div>
            <div class="hezi">
                <div class="hezi1"><img src="./img/】盒子大战字.png" alt=""></div>
            </div>
            <div class="zhuangbei">
                <div class="zhuangbei1"><img src="./img/装备升级大字.png" alt=""></div>
            </div>
            <div class="shangcheng">
                <div class="shangcheng1">
                    <img src="./img/商城大字.png" alt="">
                    <p>即将上线</p>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="r1">
            <div class="k1">
            </div>
            <div class="z1">下载app</div>
        </div>
        <div class="r2">
            <div class="k2"></div>
            <div class="z2">官方群</div>
        </div>
        <div class="r3">
            <div class="k3"></div>
            <div class="z3">在线客服</div>
        </div>
        <div class="r4">
            <div class="k4"><a href="#"><img src="./img/回到顶部.png" alt=""></a></div>
        </div>
    </div>
    <div class="mengxin">
        <div class="mengxin1"><img src="./img/萌新专区.png" alt=""></div>
        <div class="diyipai">
            <div class="ak"><img src="./img/ak箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/AK.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>0.55</span>
                <p>跃跃欲试</p>
            </div>
            <div class="ak"><img src="./img/ak箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/AK.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>0.55</span>
                <p>跃跃欲试</p>
            </div>
            <div class="ak"><img src="./img/ak箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/AK.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>0.55</span>
                <p>跃跃欲试</p>
            </div>
            <div class="ak"><img src="./img/ak箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/AK.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>0.55</span>
                <p>跃跃欲试</p>
            </div>
            <div class="ak"><img src="./img/ak箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/AK.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>0.55</span>
                <p>跃跃欲试</p>
            </div>
        </div>
        <div class="dierpai">
            <div class="hudie"><img src="./img/蝴蝶箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/蝴蝶刀.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>4.99</span>
                <p>蝴蝶秘宝</p>
            </div>
            <div class="hudie"><img src="./img/蝴蝶箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/蝴蝶刀.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>4.99</span>
                <p>蝴蝶秘宝</p>
            </div>
            <div class="hudie"><img src="./img/蝴蝶箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/蝴蝶刀.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>4.99</span>
                <p>蝴蝶秘宝</p>
            </div>
            <div class="hudie"><img src="./img/蝴蝶箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/蝴蝶刀.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>4.99</span>
                <p>蝴蝶秘宝</p>
            </div>
            <div class="hudie"><img src="./img/蝴蝶箱子.png" style="width: 273px; height: 218px;"><img class="akt"
                    src="./img/蝴蝶刀.png" style="height:120px; height:90px;"><img class="vb" src="./img/V币.png"
                    style="width:22px;height:25px;"><span>4.99</span>
                <p>蝴蝶秘宝</p>
            </div>
        </div>
        <div class="leifb"></div>
        <div class="rightb"></div>

    </div>
</body>

</html